/* ----------------------------------- */


    /* MICO-Factor classes */
    .mfactor-ribbon{
        background-color: rgba(125,1,12,1);
        background: -webkit-linear-gradient(rgba(125,1,12,0.5), rgba(89,0,2,0.5));
        background: linear-gradient(rgba(125,1,12,0.5), rgba(89,0,2,0.5));
        color:#fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        display:none;
        position:absolute;
        right:20px;
        top:0px;
        padding:0px 10px 5px 10px;
    }

    .mfactor-ribbon .value{
        font-size:40px;
        line-height: 40px;
        color:#fff;
        width:100%;
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
    }

    .app-reload-icon{
        position:absolute;
        opacity:0.5;
        width:43px;
        height:43px;
        right:120px;
        top:10px;
        cursor:pointer;
        display:none;
        z-index:1000;
    }
    .app-reload-icon:hover{
      opacity:1;
    }

    .app-changegame-menu{
      position:absolute;
      height:20px;
      right:25px;
      top:60px;
      cursor:pointer;
      z-index:1001;
    }


    /*  Margins */
    .top-40-screen{
        margin-top:40px;
    }

    .screen-full-height{
        height:100%;
    }

    .screen-padding-top-40{
        padding-top:40px;
    }

    .game-main-graphic{
        position:relative;
        color:#fff;
        min-height:600px;
        padding-bottom:0px;
        border-radius:10px;
        /*
        background: -webkit-radial-gradient(rgba(70, 29, 27, 0,3), rgba(55, 64, 72, 0.9));
        background: radial-gradient(rgba(70, 29, 27, 0.3), rgba(55, 64, 72, 0.9));
        */
        background: -webkit-radial-gradient(rgba(70, 29, 27 0.8), rgba(0, 0, 0, 0.9));
        background: radial-gradient(rgba(70, 29, 27, 0.8), rgba(0, 0, 0, 0.9));
        border: 1px solid rgba(255,255,255,0.3);
        box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
        margin-top:20px;
        padding:10px 30px;
    }

    .game-background{
        background-color:#000 !important;
        background: url(/wp-content/themes/dart/mikko/images/game-background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color:#fff;
    }

    .rtp-game-container{
         border: 1px solid rgba(255,255,255,0.1);
         border-radius:5px;
         margin:30px 10px 10px 10px;
         min-height:600px;
         background-color: rgba(255,255,255,0.1);
         background: -webkit-linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.1));
         background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    }


    .game-title-anim{
        position:absolute;
        top:0;
        font-size:50px;
        line-height:52px;
        color:#fff;
        width:100%;
        padding-top:0px;
        /* font-family: 'Open Sans Light'; */
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
        display:none;

    }

    .btn-green{
        color:#fff;
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
        font-size:17px;
        background-color: rgba(47,204,113,0.5);
        background: -webkit-linear-gradient(rgba(47,204,113,0.5), rgba(39,174,37,0.5));
        background: linear-gradient(rgba(47,204,113,0.5), rgba(39,174,37,0.5));
        position:relative;
        margin:10px 0px;
        border:1px solid rgba(255,255,255,0.1);
        padding:15px 30px;
        width:100%;
        cursor:pointer;
    }

    .btn-green:hover{
        color:#fff;
        background-color: rgba(39,174,37,0.5);
        background: -webkit-linear-gradient(rgba(39,174,37,0.5), rgba(47,204,113,0.5));
        background: linear-gradient(rgba(39,174,37,0.5), rgba(47,204,113,0.5));
    }

    .btn-red{
        color:#fff;
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
        font-size:17px;
        background-color: rgba(232,76,61,0.5);
        background: -webkit-linear-gradient(rgba(232,76,61,0.5);, rgba(193,57,43,0.5));
        background: linear-gradient(rgba(232,76,61,0.5);, rgba(193,57,43,0.5));
        position:relative;
        margin:10px 0px;
        border:1px solid rgba(255,255,255,0.1);
        padding:15px 30px;
        width:100%;
        cursor:pointer;
    }

    .btn-red:hover{
        color:#fff;
        background-color: rgba(193,57,43,0.5);
        background: -webkit-linear-gradient(rgba(193,57,43,0.5), rgba(232,76,61,0.5));
        background: linear-gradient(rgba(193,57,43,0.5), rgba(232,76,61,0.5));
    }


    .btn-standard{
        color:#fff;
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
        font-size:17px;
        background-color: rgba(47,204,113,0.5);
        background: -webkit-linear-gradient(rgba(0,84,170,0.5), rgba(0,122,199,0.5));
        background: linear-gradient(rgba(0,84,170,0.5), rgba(0,122,199,0.5));
        position:relative;
        margin:5px 0px;
        border:1px solid rgba(255,255,255,0.1);
        padding:15px 30px;
        width:100%;
        cursor:pointer;
    }

    .btn-standard:hover{
        color:#fff;
        background-color: rgba(0,84,170,0.5);
        background: -webkit-linear-gradient(rgba(0,122,199,0.5), rgba(0,84,170,0.5));
        background: linear-gradient(rgba(0,122,199,0.5), rgba(0,84,170,0.5));
    }

    /*
    .game-title-anim{
        position:relative;
        z-index:0;
        color:#fff;
        font-size:13px;
        padding:3px 10px;
        width:100%;
        max-width:100%;
        overflow: hidden;
    }

    .game-title-anim:after {
      background-color:rgba(130,1,6,1);
      background: -webkit-linear-gradient(#800108, #510104);
      background: linear-gradient(#800108, #510104);
      bottom: 0;
      content: '';
      display: block;
      height: 200%;
      left: 0;
      position: absolute;
      right: 0;
      transform: skewY(-1.5deg);
      transform-origin: 100%;
      z-index: -1;
      overflow: hidden;
    }
    */



    .container-game{
        position:relative;
        display:none;
        padding-top:10px;
        color:#fff;
    }

    .title-game{
        font-size:50px;
    }

    .subtitle-game{
        font-size:30px;
    }

    .container-result{
        display:none;
        color:#fff;
    }

    .list-score-row {
        display:inline-block;
    }



    .calc-cell-input{
        border: 1px solid rgba(255,255,255,0.2);
        min-width:80px; /*75px;*/
        max-width:130px;    /* 120px */
        padding:15px 0px;
        align:center;
        -webkit-transition: background-color 500ms ease;
        -ms-transition: background-color 500ms ease;
        transition: background-color 500ms ease;
    }

    .calc-cell{
        border: 1px solid rgba(255,255,255,0.2);
        min-width:90px; /*75px;*/
        max-width:150px;    /* 120px */
        padding:20px 0px;
        font-size:35px !important;
        align:center;
        -webkit-transition: background-color 500ms ease;
        -ms-transition: background-color 500ms ease;
        transition: background-color 500ms ease;
    }

    .calc-cell-disabled{
        border: 1px solid rgba(255,255,255,0.2);
        min-width:90px; /*75px;*/
        max-width:150px;    /* 120px */
        padding:20px 0px;
        align:center;
        color:#666;
        background-color:rgba(0,0,0,0.2);
        -webkit-transition: background-color 500ms ease;
        -ms-transition: background-color 500ms ease;
        transition: background-color 500ms ease;
    }

    .calc-cell:hover{
        background-color:#ff6600;
    }

    .calc-cell-enter{
        background-color: rgba(11,158,11,0.2);
        border: 1px solid rgba(255,255,255,0.2);
        font-size:20px;
        color:#fff;
    }

    .calc-cell-enter:hover{
        background-color: rgba(11,158,11,0.5);
        color:#fff;
    }

    .calc-input-field{
        background-color:transparent;
        color:#fff;
        font-size:30px;
        border:0px;
        margin:0px 5px;
        text-align:center;
        max-width:95%;

    }

    .clickable{
        cursor:pointer;
    }


    /* Table classes */
    .table-game-score{
        font-size:19px;
        border-radius:5px;
    }

    .row-selected{
        min-height:36px;
        border-radius:3px;
        display:inline-block !important;
        background-color:rgba(99,99,99,0.3);
        border:1px solid rgba(255,255,255,0.1);
    }



    .game-table-cell{
      display:inline-table;
        padding:5px 10px;
        font-size:19px;
        over-flow:hidden;
        white-space: nowrap;

    }



    .game-table-cell-first{
        /*
        min-width:200px;
        width:70%;
        */
    }

    .game-table-cell-last{
        align:right;
        text-align:right;
        width:25%;
        over-flow:hidden;
        white-space: nowrap;
    }

    .game-table-cell-middle{
        align:right;
        text-align:right;
        width:15%;
        over-flow:hidden;
        white-space: nowrap;
    }



    /* Buttons */

    .btn-start-game{
        padding:10px 20px;
        color:#fff;
        border-radius:8px;
        background-color:rgba(45,210,72,0.4);
        cursor:pointer;
    }

    .btn-start-game:hover{
        color:#fff;
        text-decoration: none;
        background-color:rgba(45,210,72,0.7);
    }

  

    .btn-undo-score{
        padding:10px 20px;
        color:#fff;
        border-radius:8px;
        background-color:rgba(67,0,0,0.5);
        cursor:pointer;
    }

    .btn-undo-score:hover{
        color:#fff;
        text-decoration: none;
        background-color:rgba(137,0,7,0.7);
    }


    .btn-sound{
        padding:10px 20px;
        color:#fff;
        border-radius:8px;
        background-color:rgba(255,144,0,0.4);
        cursor:pointer;
    }

    .btn-sound:hover{
        color:#fff;
        text-decoration: none;
        background-color:rgba(255,144,0,7);
    }


    .btn-register-score{
        padding:20px 40px;
        color:#fff;
        border-radius:8px;
        background-color:rgba(0,0,0,0.5);
        cursor:pointer;
    }

    .btn-register-score:hover{
        text-decoration: none;
        background-color:rgba(12,12,12,0.7);
    }

    /* GDP Fonts */
    .lbl-content{
        color:#e77e23;
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
        line-height: 1;
        font-size:70px;
    }

    .lbl-content-s{
        color:#e77e23;
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
        line-height: 1;
        font-size:50px;
    }

    .lbl-header{
        color:rgba(255,255,255,0.5);
        font-family: 'Oswald', sans-serif;
        font-style: normal;
        font-weight: 100;
        font-size:20px;
    }


    @media (max-width: 1000px) {
        .subtitle-game{
            font-size:20px;
        }

        .btn-green{
            padding:15px 5px;
        }

        .btn-red{
            padding:15px 5px;
        }

        .btn-standard{
            padding:15px 5px;
        }

        .screen-padding-top-40{
            padding-top:0px;
        }

        .lbl-content{
            font-size:50px;
        }

        .lbl-content-s{
            font-size:36px;
        }

        .lbl-header{
            font-size:17px;
        }

    }

    @media (max-width: 568px) {
        .app-reload-icon{
          display:none;
        }

        .screen-full-height{
            height:auto;
        }

        .top-40-screen{
            margin-top:10px;
        }

        .list-score-row {
            display:none;
        }

        .mobile-center{
            text-align:center !important;
        }

        .game-title-anim{
            font-size:22px;
            line-height:24px;
            margin-top:0px;
            padding-top:0px;
            /* max-width:40%;*/
        }

        .btn-green{
            padding:5px 5px;
        }

        .btn-red{
            padding:5px 5px;
        }

        .btn-standard{
            padding:5px 5px;
        }


        .calc-cell{
          font-size:25px;
          max-width:60px;
          padding:8px 0px;
          align:center;
        }


        .lbl-content{
            font-size:26px;
        }

        .lbl-content-s{
            font-size:19px;
        }

        .lbl-header{
            font-size:15px;
        }

    }